<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script type="text/javascript">
		//传一个对象进来
		function ajax (options) {
			// 存储的默认对象
			var defaults = {
				type: 'get',
				url: '',
				data: {},
				header: {
					'Content-Type': 'application/x-www-form-urlencoded'
				},
				success: function () {},
				error: function () {}
			};

			// 使用options对象中的属性覆盖defaults对象中的属性★★★
			// 后面赋值给前面的,传进来的对象用自己定义的属性,没有定义的则用defaults的属性
			// 前吸收后者
			Object.assign(defaults, options);

			// 创建ajax对象
			var xhr = new XMLHttpRequest();
			// 拼接请求参数的变量
			var params = '';
			// 循环用户传递进来的对象格式参数
			/*
      { name: 'zhangsan',age: 20}
      	name=zhangsan&age=20
      */
			for (var attr in defaults.data) {
				// attr是属性名
				// 将参数转换为字符串格式
				params += attr + '=' + defaults.data[attr] + '&';
			}
			// 将参数最后面的&截取掉并重新赋值(从哪里截取到哪里★★★)
			params = params.substr(0, params.length - 1);
			// params = params.splice(params.length - 1);

			// 判断请求方式
			if (defaults.type == 'get') {
				defaults.url = defaults.url + '?' + params;
			}
			// 配置ajax对象
			xhr.open(defaults.type, defaults.url);
			// 如果请求方式为post
			if (defaults.type == 'post') {
				// post需要设置响应头
				// 用户需要设置响应头向服务器端传递的请求参数的类型
				//获取header的属性Content-Type值
				var contentType = defaults.header['Content-Type']
				// 设置请求参数格式的类型
				//setRequestHeader 有两个参数,后面的是自己传的★★★
				xhr.setRequestHeader('Content-Type', contentType);
				// post方式又分普通post 与json
				// 如果类型为json
				if (contentType == 'application/json') {
					// 向服务器端传递json数据格式的参数 json数据需要转成字符串
					xhr.send(JSON.stringify(defaults.data))
				}else {
					// 向服务器端传递普通类型的请求参数
					xhr.send(params);
				}
			}
			else {
				// 不是post方式直接发送
				xhr.send();
			}
			// 当xhr对象接收完响应数据后触发
			xhr.onload = function () {
				// 如何判断S端返回来的数据类型,然后对其进行相应的处理

				// 获取响应头中的数据Content-Type:后面的东西
				var contentType = xhr.getResponseHeader('Content-Type');
				// 服务器端返回的数据
				var responseText = xhr.responseText;

				// 如果响应类型中包含applicaition/json
				if (contentType.includes('application/json')) {
					// 将json字符串转换为json对象
					responseText = JSON.parse(responseText)
				}

				// 当http状态码等于200的时候
				if (xhr.status == 200) {
					// 请求成功 调用处理成功情况的函数
					// xhr 暂时没有什么用
					defaults.success(responseText, xhr);
				}else {
					// 请求失败 调用处理失败情况的函数
					defaults.error(responseText, xhr);
				}
			}
		}

		ajax({
			type: 'get',
			// 请求地址
			url: 'http://localhost:3000/responseData',
			//成功时调用  data是S端返回的数据
			success: function (data) {
				console.log('这里是success函数');
				console.log(data)
			}
		})

	</script>
</body>
</html>
<!--
	请求参数要考虑的问题
	1.请求参数位置的问题
	将请求参数传递到ajax函数内部, 在函数内部根据请求方式的不同将请求参数放置在不同的位置
	get 放在请求地址的后面
	post 放在send方法中
	2.请求参数格式的问题
	application/x-www-form-urlencoded
	参数名称=参数值&参数名称=参数值
	name=zhangsan&age=20
	application/json
	{name: 'zhangsan', age: 20}
	1.传递对象数据类型对于函数的调用者更加友好
	2.在函数内部对象数据类型转换为字符串数据类型更加方便
/-->
